<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>黑白块</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#main{
				width: 300px;
				height: 500px;
				/*background: #fff;*/
				border: 1px solid black;
				margin: 10px auto;
				position: relative;
				overflow: hidden;
			}
			
			#container{
				width: 100%;
				height: 500px;
				position: relative;
				top: -125px;
			}
			
			.row{
				width: 100%;
				height: 125px;
			}
			
			.cell{
				width: 75px;
				height: 125px;
				float: left;
			}
			
			.black{
				background: black;
			}
			h1{
				margin: 0;
				color: red;
				text-align: center;
				z-index: 2;
				position: absolute;
				left: 50%;
			}
			.shi{
				width: 180px;
				margin: 0 auto;
			}
			.kai{
				float: left;
				width: 50px;
				height: 25px;
				margin: auto;
				border: 1px solid red;
				text-align: center;
				margin-left: 5px;
				cursor: pointer;
			}
			.kong{
				width: 100%;
				height: 500px;
				background: transparent;
				position: absolute;
				z-index: 5;
			}
			
		</style>
	</head>
	<body>
		<div class="kong"></div>
		<div id="main">
			<h1 id="score">0</h1>
			<div id="container"></div>
		</div>
		<div class="shi">
			<p class="kai">开始</p>
			<p class="kai zan">暂停</p>
			<p class="kai chong">重来</p>
		</div>
		<script type="text/javascript">
			
			var clock = null;//定时器操作句柄
			var state = 0;
			var speed = 6;//速度
			
			var kong = document.querySelector(".kong");
			
			
			//开始按钮
			var kai = document.querySelector(".kai");
			kai.addEventListener("click",function(){
				start();
				kong.style = "width:0px";
			})
			
			//暂停按钮
			var zan = document.querySelector(".zan");
			zan.addEventListener("click",function(){
				clearInterval(clock);
				kong.style = "width:100%";
			})
			
			//重新开始按钮
			var chong = document.querySelector(".chong");
			chong.addEventListener("click",function(){
				location.reload();//刷新页面
			})
			
			//初始化
			function init(){
				for(var i=0;i<4;i++){
					crow();
				}
				$("main").onclick = function(e){
					judge(e);
				}
			}
			
			function judge(e){
				if(state == 3){
					alert("失败");
					return;
				}
				if(e.target.className.indexOf("black") == -1){
					fall();
				}else{
					e.target.className = "cell";
					e.target.style.background = "gray";
					e.target.parentNode.pass = 1;
					score();
				}
			}
			
			//start()启动
			function start(){
				clock = window.setInterval("move()",30);
			}
			
			//动画
			function move(){
				var con = $("container");
				var top = parseInt(window.getComputedStyle(con,null)["top"]);
				if(speed + top > 0){
					top = 0;
				}else{
					top += speed;
				}
				con.style.top = top + "px";
				if(top == 1 || top == 0 || top == 3){
					crow();
					con.style.top = "-125px";
					drow();
				}else if(top == (speed-125)){
					var rows = con.childNodes;
					if((rows.length == 5) && (rows[rows.length-1].pass !== 1)){
						fall();
					}
				}
			}
			
			//结束
			function fall(){
				clearInterval(clock);
				state = 3;
				alert("失败");
			}
			
			//加速
			function jiasu(){
				speed += 1;
				if(speed == 100){
					alert("牛逼");
				}
			}
			
			//计分
			function score(){
				var newscore = parseInt($("score").innerHTML)+1;
				$("score").innerHTML = newscore;
				if(newscore % 15 == 0){
					jiasu();
				}
			}
			
			//创建div.row
			function crow(){
				var con = $("container");
				var row = cdiv("row");
				var classes = createSn();
				for(var i=0;i<4;i++){
					row.appendChild(cdiv(classes[i]));
				}
				con.insertBefore(row,con.firstChild);
			}
			
			//删除最后一行
			function drow(){
				var con = $("container");
				if(con.childNodes.length == 6){
					con.lastChild.remove();
				}
			}
			
			//创建div,className是其类名
			function cdiv(className){
				var div = document.createElement("div");
				div.className = className;
				return div;
			}
			
			function createSn(){
				var arr = ["cell","cell","cell","cell"];
				var i = Math.floor(Math.random()*4);
				arr[i] = "cell black";
				return arr;
			}
			
			//按ID获取对象
			function $(id){
				return document.getElementById(id);
			}
			
			init();
			
		</script>
	</body>
</html>
